<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>


  <script src="./js/mqtt.min.js"></script>
  <script>

    function getMqtt() {
      const client = mqtt.connect('ws://110.41.131.55:22083', {
        reconnectPeriod: 1000,
        connectTimeout: 30 * 1000,
      })

      // 当连接成功时触发
      client.on('connect', function () {
        console.log('连接成功')
      })

      // 订阅主题
      client.subscribe('/device/simu_data/report', function (err) {
        if (!err) {
          // 发布消息
          client.publish('test', 'Hello mqtt')
        }
      })

      // 当断开连接后，经过重连间隔时间重新自动连接到 Broker 时触发
      client.on('reconnect', function () {
        console.log('自动重连中...')
      })

      // 在断开连接以后触发
      client.on('close', function () {
        console.log('连接断开了')
      })

      // 当客户端无法成功连接时或发生解析错误时触发，参数 error 为错误信息
      client.on('error', function (error) {
        console.log('连接出错了', error)
      })

      // 接收消息
      client.on('message', function (topic, message) {
        // message is Buffer
        console.log(JSON.parse(message.toString()))
        client.end()
      })
    }


    getMqtt()
    setTimeout(getMqtt, 20000)
  </script>
</body>

</html>